<template>
    <div class="">
        news组件

        <h1>{{ $route.params.id }}</h1>

        <h2> {{ id }}</h2>


        <button @click="goToHome"> 点击跳转</button>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { reactive, toRefs, ref } from "vue"


import { useRoute, useRouter } from 'vue-router'


export default {
    props: ['id'],

    name: "",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    //这里存放数据
    setup (props) {
        // console.log('props', props);

        const router = useRouter()
        const route = useRoute()
        // console.log(router, 'router');
        // console.log(route, 'route');

        console.log(route.path);
        console.log(route.params.id);
        const data = reactive({})


        //  方法

        const goToHome = () => {
            router.push('/home')
        }
        return {
            data,
            goToHome
        }
    }
}
</script>

<style lang="css" scoped>
</style>
